import { Timeline, Animation, easeInOut } from './animation';

function main() {
  const timeline = new Timeline();
  const element = document.querySelector<HTMLDivElement>('#el_1');

  if (!element) {
    return;
  }

  document.querySelector<HTMLDivElement>('#el_2')!.style.transition = 'transform ease-in-out 2s';
  document.querySelector<HTMLDivElement>('#el_2')!.style.transform = 'translate(500px)';

  document.querySelector<HTMLButtonElement>('#pause')?.addEventListener('click', () => {
    timeline.pause();
  });

  document.querySelector<HTMLButtonElement>('#resume')?.addEventListener('click', () => {
    timeline.resume();
  });
  
  timeline.start();

  timeline.add(
    new Animation(element.style, 'transform', 0, 500, 2000, 0, easeInOut, v => `translateX(${v}px)`),
  );
}

main();